<template>
	<view>
		<view class="header_bt_01">
			<image src="http://124.222.72.174:8008/images/头像/头像2.jpg" class="hander_tx"></image>
			<uni-search-bar class="uni-mt-10" style="color: #f3f3f3;" bgColor="white" radius="100"
				placeholder="搜索(闲置/寻物)" clearButton="auto" cancelButton="auto" @confirm="search" />
		</view>
		<!-- 轮播图区域 -->
		<!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"> -->
		<!-- 循环渲染轮播图的 item 项 -->
		<!-- <swiper-item v-for="(item, i) in swiperList" :key="i">
				<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=129'">
				 -->
		<!-- 动态绑定图片的 src 属性 -->
		<!-- 	<image :src="item.ImgUrl"></image>
				</navigator>
			</swiper-item>
		</swiper> -->
		<view class="content">
			<xlbsh-swiper :imgList="Imgs"></xlbsh-swiper>
		</view>
		<!-- 分类导航区域 -->
		<view class="nav-list">
			<view class="nav-item" v-for="(item, i) in navList" :key="i" @click="navClickHander(item)">
				<view class="white-back">
					<image :src="item.ImgUrl" class="nav-img"></image>
					<text class="S_text">{{ item.ImgName }}</text>
				</view>
			</view>
		</view>

		<!-- 咚咚头条 广播信息 -->
		<uni-section title="校园状态" subTitle="校园跑腿/校园兼职/失物招领" type="line">
			<uni-notice-bar speed=90 showIcon scrollable single
				text="[寻物]  在第三食堂丢失一张校园卡，同学们如果有拾取，请及时联系我谢谢！ [拾物]  在东操主席台前，捡到一件耐克的羽绒服，如有同学丢失，请及时联系我！ "></uni-notice-bar>
		</uni-section>

		<!--底下校园动态模块   闲置转卖-->
		<!--闲置模块外围白底边框 -->
		<uni-group mode="card" v-for="(item,i) in XystatusList" :key="i">
			<view class="uni_bottor_xz">
				<!--闲置模块内1功能区 -->
				<view class="uni_bottor_xz_1">
					<!--闲置模块内2功能区 头像 昵称 时间 购买 -->
					<view class="uni_bottor_xz_2">
						<!--头像 -->
						<image :src="item.userImg" class="uniBt_tx"></image>
						<!--昵称 -->
						<text class="uniBt_Name">{{ item.userName }}</text>
						<!--发布时间 -->
						<text class="uniBt_Time">{{ item.Ftime }}</text>
						<!--右侧按钮 -->
						<button class="uniBt_but" type="warn" size="mini" v-if="item.type===0">购买</button>
						<button class="uniBt_but" type="warn" size="mini" v-else-if="item.type===1">接单</button>
						<button class="uniBt_but" type="warn" size="mini" v-else-if="item.type===2">查看兼职</button>
					</view>
				</view>
			</view>
			<!--闲置模块内3 外围边框灰底 -->
			<uni-group mode="card" top=60>
				<!-- 闲置-->
				<!-- 闲置-->
				<view class="uni_bottor_xz_4" v-if="item.type===0">
					<!--闲置模块内55 功能区 标题 介绍 右侧图片 价格 -->
					<text class="nuiBt_title">{{ item.title}}</text>
					<text class="nuiBt_text" space=nbsp>{{ item.text }}</text>
					<image class="nuiBt_img" :src="item.shopImg"></image>
					<text class="nuiBt_Money">{{ item.price }}元</text>
				</view>
				<!-- 帮我取 帮我买-->
				<view class="uni_bottor_xz_4" v-else-if="item.type===1">
					<!--闲置模块内55 功能区 标题 介绍 右侧图片 价格 -->
					<view style="height:200rpx;">
						<text class="nuiBt_title">{{ item.title }}</text>
						<view style="padding: 5px;" v-if="item.type2===1">
							<image class="uniBt_dd1"
								src="http://124.222.72.174:8008/images/动态区快递接单-Order_receiving/橙点.png"></image>
							<text class="uniBt_address1">取件地址</text>
							<text class="uniBt_address1_1">{{ item.qtext }}</text>
						</view>
						<view class="" v-else-if="item.type2===2">
							<image class="uniBt_dd1"
								src="http://124.222.72.174:8008/images/动态区快递接单-Order_receiving/橙点.png"></image>
							<text class="uniBt_address1">物品信息</text>
							<text class="uniBt_address1_1">{{ item.qtext }}</text>
						</view>
						<view style="padding: 5px;">
							<image class="uniBt_dd2"
								src="http://124.222.72.174:8008/images/动态区快递接单-Order_receiving/绿点.png"></image>
							<text class="uniBt_address2">收件地址</text>
							<text class="uniBt_address2_2">{{ item.stext }}</text>
						</view>
						<text class="nuiBt_Picer">酬金{{ item.price }}元</text>
					</view>
				</view>
				<!-- 兼职信息-->
				<view class="uni_bottor_xz_4" v-else-if="item.type===2">
					<!--闲置模块内55 功能区 标题 介绍 右侧图片 价格 -->
					<view style="height:600rpx;">
						<text class="nuiBt_title">发布招聘</text>
						<text class="nuiBt_title_x">{{ item.title_x }}</text>
						<view style="padding: 5px;">
							<!--工作时间-->
							<view class="uni_border_xs_1">
								<image class="uni_border_img_1"
									src="http://124.222.72.174:8008/images/动态区块兼职信息-Pt_information/工作日期.png"></image>
								<text class="uni_border_rt1">工作日期</text>
								<text class="uni_border_text_1">{{ item.working_date }}</text>
							</view>
							<!--工作时段-->
							<view class="uni_border_xs_2">
								<image class="uni_border_img_2"
									src="http://124.222.72.174:8008/images/动态区块兼职信息-Pt_information/时段.png"></image>
								<text class="uni_border_rt2">工作时段</text>
								<text class="uni_border_text_2">{{ item.working_hours }}</text>
							</view>
							<!--工作地点-->
							<view class="uni_border_xs_3">
								<image class="uni_border_img_3"
									src="http://124.222.72.174:8008/images/动态区块兼职信息-Pt_information/工作地点.png"></image>
								<text class="uni_border_rt3">工作地点</text>
								<text class="uni_border_text_3">{{ item.working_address }}</text>
							</view>
						</view>
						<view style="padding: 5px;margin-top: 70px;">
							<!--工作内容-->
							<view style="height: 100px;">
								<text class>【工作内容】\n</text>
								<text>1、{{ item.working_Nr1 }}\n</text>
								<text>2、{{ item.working_Nr2 }}\n</text>
								<text>3、{{ item.working_Nr3 }}\n</text>
							</view>
							<!--工作要求-->
							<view style="height: 100px;">
								<text>【工作要求】\n</text>
								<text>1、{{ item.working_Yq1 }}\n</text>
								<text>2、{{ item.working_Yq2 }}\n</text>
								<text>3、{{ item.working_Yq3 }}\n</text>
							</view>
						</view>
						<text class="nuiBt_Picer_3">酬金{{ item.price }}/天</text>
					</view>
				</view>

			</uni-group>
		</uni-group>
		<view style="padding:5px 0px 20px 0px;">
			<uni-load-more color="#007AFF" :status="status" iconType="auto" />
		</view>
		<view style="height: 50px;">

		</view>
		<zdy-tabbar :current-page="0"></zdy-tabbar>
	</view>
</template>


<script>
	import xlbshSwiper from '../../components/xlbsh-swiper/xlbsh-swiper.vue'
	import jsencrypt from 'node_modules/js_sdk/jsencrypt-Rsa/jsencrypt/jsencrypt.vue';
	import w_md5 from "node_modules/js_sdk/zww-md5/w_md5.js"
	export default {
		components: {
			xlbshSwiper
		},
		data() {
			return {
				title: 'Hello',
				//这是轮播图的数据列表
				swiperList: [],
				//这是分类导航数据
				navList: [{
					ImgUrl: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/首页八块功能区-Home_page/跑腿代购.png',
					ImgName: '跑腿',
				}, {
					ImgUrl: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/首页八块功能区-Home_page/交易.png',
					ImgName: '闲置',
				}, {
					ImgUrl: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/首页八块功能区-Home_page/失物招领.png',
					ImgName: '寻物',
				}, {
					ImgUrl: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/首页八块功能区-Home_page/兼职全职.png',
					ImgName: '兼职',
				}],
				Imgs: [
					'https://bkimges.oss-cn-beijing.aliyuncs.com/images/轮播图-Rotation/二手市场.png',
					'https://bkimges.oss-cn-beijing.aliyuncs.com/images/轮播图-Rotation/咚咚校园通.png',
					'https://bkimges.oss-cn-beijing.aliyuncs.com/images/轮播图-Rotation/跑腿.png',
				],
				//校园状态显示数据集合
				XystatusList: [{
						no: "159862155615",
						userImg: "http://124.222.72.174:8008/images/头像/头像2.jpg",
						userName: "淡淡一笑",
						Ftime: "2022年4月8日 18:34",
						type: 0,
						title: "闲置转卖-构建之法",
						text: "马上毕业出自用一手新书 构建之法 仅需29.99元!\n\n笔记齐全！\n\n可福州大学至诚学院自提",
						shopImg: "http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg",
						price: "￥29.99"
					},
					{
						no: "159862158888",
						userImg: "http://124.222.72.174:8008/images/头像/头像2.jpg",
						userName: "一笑很倾城",
						Ftime: "2022年4月9日 12:14",
						type: 1, //类型1 接单
						type2: 1, // 1代取 2帮买
						title: "跑腿-快递代取-东区",
						qtext: "学校菜鸟驿站包裹取件码编号1000-13-2910，请及时取件。",
						stext: "福州大学至诚学院中二405",
						price: "￥5.00"
					},
					{
						no: "159862158991",
						userImg: "http://124.222.72.174:8008/images/头像/头像2.jpg",
						userName: "梅开二度",
						Ftime: "2022年4月9日 13:14",
						type: 2,//兼职
						title_x: "福州大学至诚学院食堂配餐员",
						working_date: "任意时间",
						working_hours: "12:00-13:00",
						working_address: "至诚四堂",
						working_Nr1: "外卖打包",
						working_Nr2: "食堂打菜",
						working_Nr3: "",
						working_Yq1: "不迟到,不早退",
						working_Yq2: "注意个人卫生",
						working_Yq3: "有上进心、认值负责",
						price: "￥80.00"
					}
				],
				//flag
				flag: 0,
				status: 'more',
				pageNum: 1,
				//临时数据存储变量转换 成指定格式用

				list: [],
				list2: []

			};
		},
		onLoad() {
			//调用方法，获取轮播图数据
			this.getSwiperList()
			this.getNavList()
			this.getEm()

		},
		methods: {
			async getEm() {
				// let publiukey = `-----BEGIN PUBLIC KEY-----
				// MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCQb5UA73PJ/VIli6zoE2q84EAE
				// zMXZIKROtAwW/7uhNwIeRQRnfrSN/qUjyNhTETExEUFq4s/qUaNA/V4rDo2gtMtI
				// djAyMBbsmwd7o3xuRZyngTWkG1Ht4oCI5ARosxNZ1N3XFnnMNWqgphnTn8BB6TKA
				// uS1MqMFl7g4HGP3ZZwIDAQAB-----END PUBLIC KEY-----`; //引用 rsa 公钥
				// const {
				// 	data: res
				// } = await uni.$http.post('/api/project/selectXZImages', {
				// 	"a": uni.$getRSAcode('page=1')
				// })
				// var Decrpt = uni.$getRSADecrypt(res.data)
				// console.log("解密数据" + Decrpt)
				// this.list = JSON.parse(Decrpt)
				// let temp = {}
				// this.list.forEach((item, index, arr) => {
				// 	if (index % 2 == 0) {
				// 		temp['data1'] = item
				// 	} else if (index % 2 == 1) {
				// 		temp['data2'] = item
				// 		this.list2.push(temp)
				// 		temp = {}
				// 	}
				// })
			},
			async getSwiperList() {
				// 3.1 发起请求
				// const {
				// 	data: res
				// } = await uni.$http.post('/api/project/selectImages', {
				// 	"a": uni.$getRSAcode('轮播图')
				// })
				// //console.log(res.data)
				// var Decrpt = uni.$getRSADecrypt(res.data)
				// //console.log("解密数据"+Decrpt)
				// //请求失败
				// if (res.status !== 200) return uni.$showMsg()
				// this.swiperList = JSON.parse(Decrpt)
			},
			async getNavList() {
				// 3.1 发起请求
				// const {
				// 	data: res
				// } = await uni.$http.post('/api/project/selectImages', {
				// 	"a": uni.$getRSAcode('首页功能区')
				// })
				// //console.log(res.data)
				// var Decrpt = uni.$getRSADecrypt(res.data)
				// //console.log("解密数据"+Decrpt)
				// //请求失败
				// if (res.status !== 200) return uni.$showMsg()
				// this.navList = JSON.parse(Decrpt)
			},
			//滚动数据
			navClickHander(item) {
				console.log(item)
				if (item.ImgName === '跑腿') {
					console.log(item.ImgName)
					uni.navigateTo({
						url: '/pages/Run_errands/Run_errands'
					})
				}
				if (item.ImgName === '闲置') {
					console.log(item.ImgName)
					uni.navigateTo({
						url: '/pages/second_hand/second_hand'
					})
				}
				if (item.ImgName === '寻物') {
					console.log(item.ImgName)
					uni.navigateTo({
						url: '/pages/Lost_Found/Lost_Found'
					})
				}
				if (item.ImgName === '兼职') {
					console.log(item.ImgName)
					uni.navigateTo({
						url: '/pages/part_time/part_time'
					})
				}
			},
			//获取搜索框的值
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			getmo() {
				this.status = "more"
			}

		},
		onPullDownRefresh() {
			console.log("上拉啦")
		},
		onReachBottom() {
			console.log("触底啦")
			this.status = 'loading'
			const that = this;
			setTimeout(function() {
				that.pageNum++,
					that.getmo()
			}, 1000);

		},


	}
</script>

<style lang="scss" scoped>
	//轮播图
	swiper {
		height: 330rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.nav-list {
		display: flex;
		justify-content: space-around;

		.white-back {
			background-color: #FFFFFF;
			width: 174rpx;
			height: 160rpx;
			flex-direction: column;
			padding-top: 20rpx;
			border-radius: 15px;
		}

		.S_text {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: "微软雅黑";
			padding-top: 15rpx;
			padding-left: 58rpx;

		}

		.nav-img {
			width: 80rpx;
			height: 76rpx;
			padding-left: 48rpx;
		}
	}

	//头部样式
	.header_bt_01 {
		height: 115rpx;
		background-color: #FD3E4D;

	}

	//头部样式--头像
	.hander_tx {
		width: 90rpx;
		height: 90rpx;
		border-radius: 100px;
		margin: 10rpx 10rpx 0px 16rpx;

	}

	//头部样式--取消字体 白色
	/deep/ .uni-searchbar__cancel {
		padding-left: 10px;
		line-height: 36px;
		font-size: 14px;
		color: #f3f3f3;
	}

	//底部校园状态样式
	.uni_bottor_xz_2 {
		position: relative;
	}

	//头像
	.uniBt_tx {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 84rpx;
		height: 82rpx;
		border-radius: 100px;
	}

	//昵称
	.uniBt_Name {
		border-width: 0px;
		position: absolute;
		left: 116rpx;
		top: 12rpx;
		width: 300rpx;
		height: 54rpx;
		display: flex;
		font-family: '仿宋 Bold', '仿宋';
		font-weight: 700;
		font-style: normal;
		font-size: 16px;
	}

	//时间
	.uniBt_Time {
		border-width: 0px;
		position: absolute;
		left: 116rpx;
		top: 66rpx;
		width: 400rpx;
		height: 50rpx;
		display: flex;
		color: #A8A5A5;
		font-size: 13px;
	}

	//按钮
	.uniBt_but {
		border-width: 0px;
		position: absolute;
		left: 452rpx;
		top: 23rpx;
		width: 202rpx;
		height: 56rpx;
		background: inherit;
		background-color: rgba(217, 0, 27, 0.682352941176471);
		border: none;
		border-radius: 14px;
	}

	//内部2 
	.uni_bottor_xz_4 {
		position: relative;
	}

	//标题
	.nuiBt_title {
		border-width: 0px;
		//position: absolute;
		left: 52rpx;
		top: 160rpx;
		width: 300rpx;
		height: 34rpx;
		display: flex;
		font-size: 16px;
		padding: 5px;
	}

	//内容
	.nuiBt_text {
		//position: absolute;
		left: 52rpx;
		top: 220px;
		width: 378rpx;
		height: 220rpx;
		font-size: 13px;
		display: inline-block;
		font-family: "微软雅黑";
		padding: 5px;
	}

	//右侧图片
	.nuiBt_img {
		border-width: 0px;
		position: absolute;
		left: 380rpx;
		top: 10px;
		width: 190rpx;
		height: 200rpx;
		display: flex;
	}

	//右侧价格
	.nuiBt_Money {
		position: absolute;
		left: 400rpx;
		top: 240rpx;
		width: 160rpx;
		height: 36rpx;
		display: flex;
		color: #E55163;
	}

	//跑腿样式
	//绿色图标样式
	.uniBt_dd1 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 60rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		float: left;
	}

	//取件地址样式
	.uniBt_address1 {
		border-width: 0px;
		position: absolute;
		left: 40rpx;
		top: 64rpx;
		width: 100rpx;
		height: 28rpx;
		display: flex;
		font-size: 12px;
		color: #191919;
		float: left;
	}

	//收件地址样式
	.uniBt_address1_1 {
		border-width: 0px;
		position: absolute;
		left: 150rpx;
		top: 64rpx;
		width: 400rpx;
		height: 30rpx;
		display: flex;
		font-size: 13px;
		float: left;
	}

	//橙点样式
	.uniBt_dd2 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 140rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		float: left;
	}

	//取件地址样式
	.uniBt_address2 {
		border-width: 0px;
		position: absolute;
		left: 40rpx;
		top: 144rpx;
		width: 96rpx;
		height: 28rpx;
		display: flex;
		font-size: 12px;
		color: #191919;
		float: left;
	}

	//收件地址样式
	.uniBt_address2_2 {
		border-width: 0px;
		position: absolute;
		left: 150rpx;
		top: 144rpx;
		width: 400rpx;
		height: 30rpx;
		display: flex;
		font-size: 13px;
		float: left;
	}

	//金额样式
	.nuiBt_Picer {
		border-width: 0px;
		position: absolute;
		left: 380rpx;
		top: 16rpx;
		width: 200rpx;
		height: 31px;
		display: flex;
		color: #E55163;
		font-size: 14px;
	}

	//小标题样式
	.nuiBt_title_x {
		border-width: 0px;
		position: absolute;
		left: 8rpx;
		top: 60rpx;
		width: 320rpx;
		height: 26rpx;
		display: flex;
		font-size: 11px;
	}

	//边框样式 同样
	.uni_border_xs_1 {
		border-width: 0px;
		position: absolute;
		left: -15rpx;
		top: 110rpx;
		width: 180rpx;
		height: 94rpx;
		display: flex;
		border: 1px solid #000000;
		border-radius: 14px;
	}

	.uni_border_xs_2 {
		border-width: 0px;
		position: absolute;
		left: 185rpx;
		top: 110rpx;
		width: 180rpx;
		height: 94rpx;
		display: flex;
		border: 1px solid #000000;
		border-radius: 14px;
	}

	.uni_border_xs_3 {
		border-width: 0px;
		position: absolute;
		left: 385rpx;
		top: 110rpx;
		width: 180rpx;
		height: 94rpx;
		display: flex;
		border: 1px solid #000000;
		border-radius: 14px;
	}

	//工作日期 时段 地点样式 图片样式
	.uni_border_img_1 {
		position: absolute;
		left: 15rpx;
		top: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.uni_border_img_2 {
		position: absolute;
		left: 15rpx;
		top: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.uni_border_img_3 {
		position: absolute;
		left: 15rpx;
		top: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}

	//工作日期 时段 地点样式 文字样式
	.uni_border_text_1 {
		position: absolute;
		//left: 10rpx;
		top: 27px;
		width: 88px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		text-align: center;
		display: block;
	}

	.uni_border_text_2 {
		position: absolute;
		//left: 20rpx;
		top: 27px;
		width: 88px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		text-align: center;
		display: block;
	}

	.uni_border_text_3 {
		position: absolute;
		//left: 40rpx;
		top: 27px;
		width: 88px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		text-align: center;
		display: block;
	}

	.uni_border_rt1 {
		border-width: 0px;
		position: absolute;
		left: 32px;
		top: 9px;
		width: 50px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 11px;
	}

	.uni_border_rt2 {
		border-width: 0px;
		position: absolute;
		left: 32px;
		top: 9px;
		width: 50px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 11px;
	}

	.uni_border_rt3 {
		border-width: 0px;
		position: absolute;
		left: 32px;
		top: 9px;
		width: 50px;
		height: 11px;
		display: flex;
		font-family: '楷体';
		font-weight: 400;
		font-style: normal;
		font-size: 11px;
	}

	//工作内容 工作要求 

	//金额样式
	.nuiBt_Picer_3 {
		border-width: 0px;
		position: absolute;
		left: 340rpx;
		top: 16rpx;
		width: 240rpx;
		height: 31px;
		display: flex;
		color: #E55163;
		font-size: 14px;
	}
</style>
